window.addEventListener('load', function () {

    // 1. 获取元素对象
    var sliderContent = document.querySelector('.slider_content');
    // element.querySelector('ul');
    var ul = sliderContent.querySelector('ul');
    var ol = sliderContent.querySelector('ol');

    // 盒子的宽度
    var sliderWidth = sliderContent.clientWidth;
    // 当前图片的索引
    var index = 1;
    // 判断手指在屏幕中是否挪动
    var flage = false;

    // 2. 手指触摸 挪动元素对象
    // 2.1 手指触摸的起始位
    var startX = 0;
    // 2.2 手指在屏幕上的移动距离
    var moveX = 0;
    // 2.3 手指开始 触摸
    ul.addEventListener('touchstart', function (e) {
        // 5.1 手指触摸停止动画
        clearInterval(timer);

        // 获取起始位置
        startX = e.targetTouches[0].pageX;
        flage = false;
    })
    // 2.4 监听手指移动
    ul.addEventListener('touchmove', function (e) {
        // 获得手指在屏幕上的移动距离
        moveX = e.targetTouches[0].pageX - startX;
        var translateX = -index * sliderWidth + moveX;
        ul.style.transform = 'translateX(' + translateX + 'px)';

        flage = true; // 手指挪动了
    })

    // 3 监听手指离开屏幕
    ul.addEventListener('touchend', function () {
        if (flage) {
            // 当超出 宽度的一半 就跳到下一张图片
            if (Math.abs(moveX) > sliderWidth * 0.5) { 
                if (moveX < 0) { // 判断挪动的 位置
                    index++; // 把右侧的一张图片展示出来
                } else {
                    index--; // 把左侧的一张图片展示出来
                }
                // var translateX = -index * sliderWidth;
                // ul.style.transform = 'translateX(' + translateX + 'px)';
            } 
            var translateX = -index * sliderWidth;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }

        // 5.2 手指离开重新开始动画
        timer = setInterval(function () {
            index++;
            // 需要移动的位置
            var translateX = -index * sliderWidth;
            // 设置过度动画
            ul.style.transition = 'all .3s';
            // 设置位置
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
    })

    // 4. 监听过度动画完成 transitionend 是过度动画完成会触发
    ul.addEventListener('transitionend', function () {
        // 动画完成 切换 最后一张图 或者 第一张图片的位置
        if (index > 3) {
            index = 1;
        } else if (index <= 0) {
            index = 3;
        }
        // 首先停止过度动画
        ul.style.transition = 'none';
        // 在转换位置
        var translateX = -index * sliderWidth;
        ul.style.transform = 'translateX(' + translateX + 'px)';

        // 动画结束 调整分页按钮
        // 找出之前选中的元素 删除样式
        ol.querySelector('.current').classList.remove('current');
        // 找出当前选中的元素 设置样式
        ol.children[index-1].classList.add('current');
    })

    // 5. 设置 自动滚动
    var timer = setInterval(function () {
        index++;
        // 需要移动的位置
        var translateX = -index * sliderWidth;
        // 设置过度动画
        ul.style.transition = 'all .3s';
        // 设置位置
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);


})